import React, { useRef } from 'react';
import { FormInstance } from 'antd/es/form';
import { Button, Space } from 'antd';
import { ProTableTypes } from '../Table';
import { SearchConfig } from './index';
import styles from './index.less';
import classNames from 'classnames';
export interface FormOptionProps {
  searchConfig: SearchConfig;
  type?: ProTableTypes;
  form: FormInstance;
  submit: () => void;
  collapse: boolean;
  setCollapse: (collapse: boolean) => void;
  showCollapseButton: boolean;
  onReset?: () => void;
}

/**
 * FormFooter 的组件，可以自动进行一些配置
 * @param props
 */
const FormOption: React.FC<FormOptionProps> = (props) => {
  const {
    searchConfig,
    setCollapse,
    collapse,
    type,
    // form,
    submit,
    showCollapseButton,
    // onReset = () => {},
  } = props;
  const isForm = type === 'form';
  const { searchText, submitText, /*resetText,*/ collapseRender, optionRender } = searchConfig;
  const ref = useRef<any>(null);

  if (optionRender === false) {
    return null;
  }
  if (optionRender) {
    return <>{optionRender(searchConfig, props)}</>;
  }
  return (
    <div ref={ref} className={styles['form-option-wrap']}>
      <Space size={14}>
        {/* <Button
          onClick={() => {
            form.resetFields();
            onReset();
            if (!isForm) {
              submit();
            }
          }}
        >
          {resetText}
        </Button> */}
        <Button
          type="primary"
          className={classNames('form-search')}
          htmlType="submit"
          onClick={() => submit()}
        >
          {isForm ? submitText : searchText}
        </Button>
        {!isForm && showCollapseButton && (
          <a
            onClick={() => {
              setCollapse(!collapse);
            }}
          >
            {collapseRender && collapseRender(collapse)}
          </a>
        )}
      </Space>
    </div>
  );
};

export default FormOption;
